<!-- 栏目审核 -->
<template>
  <el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%">
    <el-table-column prop="name" label="栏目名称" width="" />
    <el-table-column prop="level" label="栏目类型" width="">
      <template #default="scope">{{ scope.row.level+'级栏目'}}</template>
    </el-table-column>
    <!-- <ma-dict-column prop="agApprove.approveType" label="类型" dict-type="column_button_permissions" ></ma-dict-column> -->
    <!-- 用框架自带的组件不好使，大概率是agApprove.approveType的原因 -->
    <el-table-column prop="" label="类型" width="">
      <template #default="scope">
        <div v-if="scope.row.agApprove.approveType == '1'">添加子栏目</div>
        <div v-if="scope.row.agApprove.approveType == '2'">编辑子栏目</div>
        <div v-if="scope.row.agApprove.approveType == '3'">删除</div>
        <div v-if="scope.row.agApprove.approveType == '4'">移动</div>
        <div v-if="scope.row.agApprove.approveType == '5'">发布</div>
        <div v-if="scope.row.agApprove.approveType == '6'">撤销</div>
        <div v-if="scope.row.agApprove.approveType == '7'">编辑根栏目</div>
      </template>
    </el-table-column>
    <el-table-column prop="approveType" label="提交类型" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.approveType == 1" type="primary">新增</el-tag>
            <el-tag v-if="scope.row.approveType == 2" type="warning">编辑</el-tag>
            <el-tag v-if="scope.row.approveType == 3" type="danger">删除</el-tag>
          </template>
        </el-table-column>
    <el-table-column prop="parentName" label="上级栏目" width="" />
    <el-table-column prop="description" label="栏目描述" width="" />
    <el-table-column prop="agApprove.creatorName" label="提交人" width="" />
    <el-table-column prop="agApprove.createTime" label="提交时间" width="" />
    <el-table-column prop="" label="操作" width="" fixed="right">
      <template #default="scope">
        <el-button type="success" plain @click="examine('4',scope.row)">通过</el-button>
        <el-button type="danger" plain @click="reject(scope.row)">驳回</el-button>
        <el-button type="text" @click="preview(scope.row)">预览</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />

  <el-dialog v-model="rejectShow" title="驳回意见" @close="cancel" width="30%">
    <el-input v-model="textarea" :rows="5" type="textarea" />
    <template #footer>
      <el-button type="primary" @click="examine('5')">确定</el-button>
    </template>
  </el-dialog>
</template>
    
    <script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { listColumn, approveColumn } from '@/api/allApi'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { useRouter } from 'vue-router'

// let tableData = reactive([])
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数
const data = reactive({
	tableData: []
})

onMounted(() => {
	getList()
})

const getList = () => {
	listColumn({
		websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		approveState: '2'
	}).then((res: any) => {
		if (res.code === 0) {
			data.tableData = res.data.list
			total.value = res.data.total
		} else {
			ElMessage.success(res.msg)
		}
	})
}

const rejectShow = ref(false)
const textarea = ref('')
const rowId = ref('')
const reject = (row: any) => {
	rejectShow.value = true
	rowId.value = row.agApprove.id
}
const cancel = () => {
	rejectShow.value = false
	textarea.value = ''
}
const examine = (status: string, row: any) => {
	let params = {}
	if (status === '4') {
		params = {
			id: row.agApprove.id,
			approveState: status
		}
	} else if (status === '5') {
		params = {
			id: rowId.value,
			approveState: status,
			approveReason: textarea.value
		}
	}
	approveColumn(params).then(res => {
		if (res.code === 0) {
			ElMessage.success('审批完成')
			getList()
			cancel()
		} else {
			ElMessage.error(res.msg)
		}
	})
}

const router = useRouter()
const preview = (row: any) => {
	// 在新标签页中打开
	const routeData = router.resolve({
		path: `/preview`,
		query: {
			parentId: row.topId,
			parentName: row.topName,
			currentId: row.id,
			type: 'column'
		}
	})
	window.open(routeData.href, '_blank')
}
</script>
    
    <style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
    